<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>况球球酒店管理系统</title>
<link rel="stylesheet" type="text/css" href="<%= path %>/public/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="<%= path %>/public/css/default.css">

<style type="text/css">
.contaier{
width:640px;height:530px;overflow:hidden;margin: 30px auto;}
.card {
	perspective: 1000;
	-webkit-perspective: 1000;
	width: 100%;
	height:170px;
	overflow:hidden;
	margin-bottom: 10px;
}

#right .card{height:250px;}
.face{
	position: absolute;
	border-radius:5px;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	transition: all 1s ease;
	backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	background-color: rgb(178, 39, 49);
}
.front {
	z-index: 10;
}
.back{
	transform:rotate3d(0,1,0,-180deg);
	z-index: 8;
}
.card-flipped .front{
	transform:rotate3d(0,1,0,180deg);
	z-index: 8;
}
.card-flipped .back{
	transform:rotate3d(0,1,0,0deg);
	z-index: 10;
}
#left{float: left;width:318px;}
#right{float: right;width:318px;}
#right .right-img{
	height: 248px;
	width: 317px;
}
</style>
</head>
<body>
<div>
<tr>
<td style="font-family: 仿宋;">
<font size="10" color="#4A1106" >况球球酒店预订系统</font>
</td>
<td style="text-align: center;">
<a href="http://lenovo-pc:8080/JavaPrj_9/userLogin.htm" target="_blank"> <font size="5">请登录</font></a>
</td>
<td>本系统仅供酒店工作人员使用，如需订房请提前打电话给客服或者到店即可提前预定
谢谢 
</td>
</div>
<div class="contaier">
	<div id="left">
		<div class="cards">
			<div class="card">
				<div class="face front">
					<a href="#">
						<img src="picture/left_1_01.png" class="">
					</a>
				</div>
				<div class="face back cardAK">
					<img src="picture/11.png" class=""> </a>
				</div>
			</div>
			<div class="card">
				<div class="face front" style="background-color: rgb(178, 39, 49);">
					<a href="">
						<img src="picture/left_2_01.png" class="">
					</a>
				</div>
				<div class="face back cardAK">
					<a href="">
						<img src="picture/12.jpg" class=""> 
					</a>
				</div>
			</div>
			<div class="card">
				<div class="face front" style="background-color: rgb(178, 39, 49);">
					<a href="#">
						<img src="picture/left_3_01.png" class="">
					</a>
				</div>
				<div class="face back cardAK">
					<a href="#">
						<img src="picture/13.jpg" class=""> 
					</a>
				</div>
			</div>
		</div>
	</div>
	<div id="right">
		<div class="cards">
			<div class="card">
				<div class="face front">
					<a href="#">
						<img src="picture/right_1_01.png" class="right-img"> 
					</a>
				</div>
				<div class="face back">
					<a href="#">
						<img src="picture/15.jpg" class="right-img"> 
					</a>
				</div>
			</div>
			<div class="card">
				<div class="face front">
				<a href="#">
					<img src="picture/right_2_01.png" class="right-img"> 
				</a>
				</div>
				<div class="face back">
					<a href="#">
						<img src="picture/14.jpg" class="right-img"> 
					</a>
				</div>
			</div>										
		</div>
	</div>
</div>
<script type="text/javascript" src="<%= path %>/public/scripts/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function () {
	flip();
});
function flip() {
	var timer = null;
	var i = 0;
	var j = 0;
	var aFlip = $(".card");
	function flipFn(arg1, arg2) {
		aFlip.eq(i).toggleClass('card-flipped'); 
		i++;
		if(i==5){
			i=0;
		}
	}
	timer = setInterval(flipFn, 2000);
}
</script>
</body>
</html>
